<template>
  <div class="main">
    <govheader title="化工产业大脑 · 危化品总览" @zfNameflagChange="zfNameflagChange"></govheader>
    <govnavigation></govnavigation>
    <el-row class="content" :gutter="10" style="margin: 0;padding-bottom:5px" v-if="zfNameflag">
      <el-col :span="8" class="content-left">
        <el-col class="box">
          <div class="title">
            <p>危化品概览</p>
          </div>
          <div class="content-body">
            <el-row type="flex" justify="space-around" class="rightTop">
              <el-col :span="7" class="rightTopBox">
                <div>危化品企业数</div>
                <div class="active">{{hzEntQty}}</div>
              </el-col>
              <el-col :span="7" class="rightTopBox">
                <div>危化品名录</div>
                <div class="active">{{hzTypeQty}}</div>
              </el-col>
              <el-col :span="7" class="rightTopBox">
                <div>重点监管危化品种类</div>
                <div class="active">{{majorHzTypeQty}}</div>
              </el-col>
            </el-row>
            <el-row class="rightTopBottom">
              <el-col>
                <div style="width: 50%; height: 200px; float: left;  position: relative;">
                  <div id="overview" style="width: 100%; height: 200px; z-index:100"></div>
                  <!-- <div class="legend">
                    <div
                      class="legendColor"
                      :style="{'background-color':legendColor1}"
                    ></div>
                    <div>{{legendValue1}}</div>
                  </div>
                  <div class="aperture "></div> -->
                </div>
                <div style="width: 50%; height: 200px; float: left; position: relative;">
                  <div class="enterprise-body">
                    <div>
                      <div
                        class="enterprise-content"
                        v-for="(item, index) in option1data"
                        :key="index"
                      >
                        <div class="enterprise-color" :style="{ background: item.itemStyle.color }"></div>
                        <div class="enterprise-type">{{ item.name }}</div>
                        <div class="enterprise-count">{{ item.pre }}</div>
                      </div>
                    </div>
                  </div>
                </div>
              </el-col>
            </el-row>
          </div>
        </el-col>
        <el-col class="box">
          <div class="title">
            <p>危化品企业名录</p>
          </div>
          <div class="content-body" style="padding: 5px 15px;">
            <div class="tabs">
              <div :class="active === 0 ? 'selectActive' : ''" @click="activeClick(0)">生产企业</div>
              <div :class="active === 1 ? 'selectActive' : ''" @click="activeClick(1)">经营企业</div>
              <div :class="active === 2 ? 'selectActive' : ''" @click="activeClick(2)">运输企业</div>
              <!-- <div
                :class="active === 3 ? 'selectActive' : ''"
                @click="activeClick(3)"
                style="border-left: 1px solid #7db2d0"
              >
                其他
              </div>-->
            </div>
            <div id="tableColor">
              <el-table
                ref="table"
                :data="tableData"
                style="width: 100%"
                height="367"
                :row-style="{ height: '0' }"
                :cell-style="{ padding: '6px 0' }"
                stripe
                :default-sort="{prop: 'parkName',order: 'descending'}"
                :row-class-name="tableRowClassName"
              >
                <el-table-column type="index" label="排名"></el-table-column>
                <el-table-column property="entName" :show-overflow-tooltip="true" label="企业名称"></el-table-column>
                <el-table-column
                  property="parkName"
                  width="120"
                  sortable
                  :show-overflow-tooltip="true"
                  label="园区名称"
                ></el-table-column>
                <el-table-column
                  v-if="active!==2"
                  property="hzTypeName"
                  width="80"
                  align="center"
                  :show-overflow-tooltip="true"
                  label="危化品种类"
                ></el-table-column>
              </el-table>
            </div>
          </div>
        </el-col>
      </el-col>
      <el-col :span="8" class="content-center" style="background-color: (255, 255, 255, 0.5)">
        <div id="map" style="width: 100%; height: 506px"></div>
        <div class="box" style="margin-top: 10px">
          <div class="title">
            <p>危化品运输</p>
          </div>
          <div class="content-body" style="overflow: hidden;">
            <div class="source" style="width: 100%;  height:40px">
              <div>
                <div>运输企业数</div>
                <div>{{transportationEntQty}}</div>
              </div>
              <div>
                <div>运输车辆数</div>
                <div>{{carQty}}</div>
              </div>
              <div>
                <div>驾驶员数</div>
                <div>{{personnelQty}}</div>
              </div>
            </div>
            <div style="width: 100%;height: 152px">
              <div style="width: 50%; float: left;height: 100%">
                <div id="transport" style="width: 100%; height: 100%; z-index:100"></div>
              </div>
              <div style=" width: 50%; float: left;height: 100%">
                <div class="enterprise-body">
                  <div
                    class="enterprise-content1"
                    v-for="(item, index) in  option3Data"
                    :key="index"
                  >
                    <div style="height: 20px;line-height: 20px; ">
                      <div class="enterprise-color1" :style="{ background: item.itemStyle.color }"></div>
                      <div class="enterprise-type1">{{ item.name }}</div>
                      <div class="enterprise-count1">{{ item.pre }}</div>
                    </div>
                    <div style="height: 20px;line-height: 20px;">
                      <div class="enterprise-type2">省内:{{ item.inner}}</div>
                      <div class="enterprise-count2">省外:{{ item.out}}</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="8" class="content-center" style="background-color: (255, 255, 255, 0.5)">
        <el-row>
          <el-col class="box">
            <div class="title">
              <p>园区危化品分布情况</p>
            </div>
            <div class="content-body">
              <div id="dangerType" style="width: 100%; height: 246px"></div>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col class="box">
            <div class="title">
              <p>园区危化品装卸货情况</p>
            </div>
            <div class="content-body" style="margin-top: 8px;">
              <div id="loading" style="width: 100%; height: 400px"></div>
            </div>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import dd from 'gdt-jsapi'
import govheader from '@/components/govheader2'
import govnavigation from '@/components/govnavigation2'
import 'echarts-gl'
const echarts = require('echarts')
export default {
  name: 'zfDangerousGoods',
  components: { govheader, govnavigation },
  data () {
    return {
      zfNameflag: true,
      hzEntQty: '',
      hzTypeQty: '',
      majorHzTypeQty: '',
      businessEnterprisesList: [],
      manufacturingEnterprisesList: [],
      transportationEnterprisesList: [],
      transportationEntQty: '',
      carQty: '',
      personnelQty: '',
      tableData: [],
      active: 0,
      myChart1: '',
      option1: '',
      colorList: [
        'rgba(174,66,234,.8)',
        'rgba(38,153,161,.8)',
        'rgba(222,128,66,.8)',
        'rgba(222,179,92,.8)',
        'rgba(167,219,245,.8)',
        'rgba(28,85,165,.8)'
      ],
      colorList2: [
        'rgba(0, 255, 255, 1)',
        'rgba(218, 182, 97, 1)',
        'rgba(214, 46, 246, 1)'
      ],
      option1data: '',
      option1data5Total: 0,
      myChart2: '',
      option2: '',
      myChart3: '',
      option3: '',
      myChart4: '',
      option4: '',
      myChart5: '',
      option5: '',
      center: { lng: 119.501611, lat: 29.483372 },
      map: '',
      zoom: 12,
      legendValue1: '',
      legendColor1: '',
      option3Data: '',
      mix: '',
      min: '',
      startCharts3: null,
      timer1: null,
      colorList1: [
        'rgb(5,148,239)',
        'rgb(5,119,234)',
        'rgb(101,206,153)',
        'rgb(243,242,134)',
        'rgb(255,203,91)',
        'rgb(183,74,237)'
      ],
      colorList4: [
        'rgba(5,148,239,.5)',
        'rgba(5,119,234,.5)',
        'rgba(101,206,153,.5)',
        'rgba(243,242,134,.5)',
        'rgba(255,203,91,.5)',
        'rgba(183,74,237,.5)'
      ]
    }
  },
  created () {
    if (window.SITE_CONFIG['sitURL'] === 'https://www.plantmate.com/api') {
      dd.getAuthCode({})
        .then((res) => {
          if (res) {
            let params = {
              applicationFlag: '20',
              authCode: res.auth_code
            }

            this.$http
              .post(`/home/sys/loginfree/authentication`, params)
              .then(({ data: res }) => {
                console.log('res2:', res)
                localStorage.setItem('buriedPointInformation',JSON.stringify(res.data))
                this.$store.commit('zfName', res.data.lastName)
                if (res.code !== 0) {
                  this.zfNameflag = false
                }
              })
              .catch(() => {
                this.zfNameflag = false
              })
          }
        })
        .catch(() => {
          this.zfNameflag = false
        })
    }
  },
  mounted () {
    let _this = this
    let list = []
    this.getTransport()
    this.getDangerType()
    this.getLoading()
    let date = new Date()
    let year = date.getFullYear()
    let month = date.getMonth() + 1
    let day = date.getDate() - 1
    let time = String(year) + String(month) + String(day)

    this.$http
      .post(`/home/government/hazardousChemicalsOverview/info`, {
        searchDate: time
      })
      .then(({ data: res }) => {
        this.hzEntQty = res.data.hzOverview.hzEntQty
        this.hzTypeQty = res.data.hzOverview.hzTypeQty
        this.majorHzTypeQty = res.data.hzOverview.majorHzTypeQty
        res.data.hzOverview.hzEntTypeList.map((item, index) => {
          item.itemStyle = {
            color: this.colorList[index]
          }
        })

        list = res.data.hzOverview.hzEntTypeList.map((i) => {
          return i.value
        })
        var num = -1
        this.option1data = res.data.hzOverview.hzEntTypeList.map(
          (item, index) => {
            num++
            if (num === this.colorList1.length) {
              num = 0
            }
            item.itemStyle = {
              color: this.colorList1[num],
              color1: this.colorList4[num]
            }
            item.value = Number(item.value)
            item.name = String(item.name)
            item.pre = this.countPercentage(list)[index]
            this.option1data5Total += Number(item.value)

            return item
          }
        )
        this.tableData = this.manufacturingEnterprisesList =
          res.data.HzEntDirectory.manufacturingEnterprises
        this.businessEnterprisesList =
          res.data.HzEntDirectory.businessEnterprises
        this.transportationEnterprisesList =
          res.data.HzEntDirectory.transportationEnterprises
        clearInterval(_this.intervalId)
        let map1 = {}
        res.data.mapParkCarQty.forEach((item) => {
          map1[item.parkName] = [
            item.longitude,
            item.latitude,
            item.inGoodsNum,
            item.outGoodsNum
          ]
        })
        this.center = map1
        this.transportationEntQty =
          res.data.hzTransportation.transportationEntQty
        this.carQty = res.data.hzTransportation.carQty
        this.personnelQty = res.data.hzTransportation.personnelQty
        list = res.data.hzTransportation.safeCode.map((i) => {
          i.value = i.provinceQty + i.outsideProvinceQty
          return i.value
        })

        this.option3Data = res.data.hzTransportation.safeCode.map(
          (item, index) => {
            return {
              name: item.safeCode,
              value: item.provinceQty + item.outsideProvinceQty,
              inner: item.provinceQty,
              out: item.outsideProvinceQty,
              itemStyle: {
                color: this.colorList2[index]
              },
              pre: this.countPercentage(list)[index]
            }
          }
        )
        this.option3.series[0].data = this.option3Data
        this.option4.series[0].data = res.data.hzCategory.entValue
        this.option4.series[1].data = res.data.hzCategory.typeValue
        this.option4.xAxis[0].data = res.data.hzCategory.name
        this.option5.yAxis[0].data = res.data.parkLoadingUnloading.parkName
        this.option5.series[0].data = res.data.parkLoadingUnloading.outGoodsNum
        this.option5.series[1].data = res.data.parkLoadingUnloading.inGoodsNum

        this.myChart3.setOption(this.option3)
        this.myChart4.setOption(this.option4)
        this.myChart5.setOption(this.option5)
        this.getright_table()
        this.renderMyChart()
        // this.$nextTick(() => {
        this.getOverview()
      })
      // })
      .catch(() => {})
  },
  methods: {
    zfNameflagChange (val) {
      this.zfNameflag = val
    },
    tableRowClassName ({ row, column, rowIndex }) {
      if (rowIndex % 2 === 0) {
        return 'table-row1'
      } else {
        return 'table-row2'
      }
    },

    getOverview () {
      let _this = this

      this.myChart1 = echarts.init(document.getElementById('overview'))
      var data = []
      var seriesOption = [{
        type: 'pie',
        radius: [0, '80%'],
        label: {
          show: false,
          color: '#09F9D0',
          lineHeight: 24
          // formatter: e => {
          //     return `${e.name}\n销售量: ${e.data.value}人\n良品率: ${e.data.rate}%`
          // }
        },
        labelLine: {
          length: 20,
          lineStyle: {
            color: '#09F9D0'
          }
        },
        itemStyle: {
          borderWidth: 2,
          borderColor: 'rgba(255,255,255,.5)',
          // 阴影
          shadowColor: 'rgba(0, 0, 0, .2)',
          shadowBlur: 6,
          shadowOffsetY: 4
        },
        data: []
      }
      ]
      for (let i = 0; i < _this.option1data.length; i++) {
        let json = {
          type: 'bar',
          name: _this.option1data[i].name,
          max: 100, // 100 的比例
          data: [65], // 控制半径占比
          barWidth: (_this.option1data[i].value / _this.option1data5Total) * 100 + '%', // 控制和饼图角度一致
          barGap: 0,
          itemStyle: {
            color: _this.option1data[i].itemStyle.color1,
            shadowColor: _this.option1data[i].itemStyle.color1,
            shadowBlur: 6
          },
          coordinateSystem: 'polar'
        }
        data.push(
          {
            value: _this.option1data[i].value,
            rate: _this.option1data[i].value,
            name: _this.option1data[i].name,
            itemStyle: {
              color: _this.option1data[i].itemStyle.color
            }
          }
        )
        seriesOption.push(json)
      }
      seriesOption[0].data = data
      this.option1 = {
      // 背景颜色
      // backgroundColor: '#0D1223',
        tooltip: {
          trigger: 'item',
          confine: true,
          padding: [0, 5],
          backgroundColor: 'rgba(0,0,0,.5)',
          extraCssText: 'width:150px;color:#ffffff; white-space:pre-wrap;z-index: 100',
          formatter: function (params) {
            let percent = 0
            let total = 0
            for (let i = 0; i < _this.option1data.length; i++) {
              total += _this.option1data[i].value
            }
            percent = Number(((params.value / total) * 100).toFixed(0))
            if (params.name !== '') {
              return params.name + ' : ' + params.value + '个,占比 : ' + percent + '%'
            } else {
              return ''
            }
          }
        },
        angleAxis: {
          type: 'category',
          // 去掉边线
          axisLine: {
            show: false
          }
        },
        radiusAxis: {
          max: 100,
          // 去掉刻度线
          axisLine: {
            show: false
          },
          axisLabel: {
            show: false
          },
          axisTick: {
            show: false
          },
          splitLine: {
            show: false
          }
        },
        polar: {
          radius: [0, '80%']
        },
        series: seriesOption
      }
      this.myChart1.setOption(this.option1)
      this.autoPlay(_this.myChart1, _this.option1, 'timer1')
    },
    getright_table () {
      var isScroll = true
      // 拿到表格挂载后的真实DOM
      const table = this.$refs.table
      // 拿到表格中承载数据的div元素
      const divData = table.bodyWrapper
      this.addEvent(divData, 'mouseenter', function () {
        isScroll = false
      })
      this.addEvent(divData, 'mouseleave', function () {
        isScroll = true
      })
      this.intervalId = setInterval(() => {
        if (isScroll) {
          // 元素自增距离顶部1像素
          divData.scrollTop += 1
          // 判断元素是否滚动到底部(可视高度+距离顶部=整个高度)
          if (
            divData.clientHeight + divData.scrollTop + 1 >=
            divData.scrollHeight
          ) {
            // 重置table距离顶部距离
            divData.scrollTop = 0
          }
        }
      }, 100)
    },
    addEvent (obj, sEvent, fn) {
      if (obj.attachEvent) {
        obj.attachEvent('on' + sEvent, fn)
      } else {
        obj.addEventListener(sEvent, fn, false)
      }
    },
    activeClick (val) {
      let _this = this
      this.active = val
      if (val === 0) {
        this.tableData = this.manufacturingEnterprisesList
      } else if (val === 1) {
        this.tableData = this.businessEnterprisesList
      } else if (val === 2) {
        this.tableData = this.transportationEnterprisesList
      }
      clearInterval(_this.intervalId)
      this.$refs.table.bodyWrapper.scrollTop = 0
      this.getright_table()
    },
    getTransport () {
      let _this = this
      this.myChart3 = echarts.init(document.getElementById('transport'))

      this.option3 = {
        animationDuration: 5000,
        tooltip: {
          trigger: 'item',
          confine: true,
          extraCssText: 'white-space:normal;word-break:break-all',
          formatter: function (data) {
            return (
              data.data.name +
              '<br/>省内: | ' +
              data.data.inner +
              '<br/>省外: | ' +
              data.data.out
            )
          }
        },
        series: [
          {
            type: 'pie',
            radius: ['50%', '95%'],
            center: ['25%', '55%'],
            roseType: 'area',
            label: {
              // 标识
              normal: {
                show: true,
                position: 'inner', // 标签的位置
                textStyle: {
                  fontSize: 10, // 文字的字体大小
                  color: '#fff'
                },
                formatter: '{d}%'
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            data: []
          }
        ]
      }
      this.myChart3.setOption(this.option3)
      this.autoPlay(_this.myChart3, _this.option3, 'startCharts3')
    },
    getDangerType () {
      let _this = this
      this.myChart4 = echarts.init(document.getElementById('dangerType'))
      this.option4 = {
        animationDuration: 5000,
        tooltip: {
          trigger: 'axis'
        },
        // color: ['#00A3FF', '#00DBD4', '#A885F0', '#5F83FF', '#65D77B'],
        legend: {
          top: 0,
          right: 10,
          textStyle: {
            color: '#BFF7FF'
          }
        },
        grid: {
          top: '22%',
          left: '3%',
          right: '4%',
          bottom: '2%',
          containLabel: true
        },
        dataZoom: [
          {
            type: 'inside',
            startValue: 0,
            endValue: 8,
            xAxisIndex: [0],
            zoomLock: true
          }
        ],
        xAxis: [
          {
            type: 'category',
            axisLabel: {
              interval: 0,
              rotate: 40
            },
            data: [],
            axisLine: {
              // 这是y轴文字颜色
              lineStyle: {
                color: '#BFF7FF'
              }
            }
          }
        ],

        yAxis: [
          {
            type: 'value',

            axisLine: {
              // 这是y轴文字颜色
              lineStyle: {
                color: '#BFF7FF'
              }
            },
            name: '危化品企业数',
            max: function (value) {
              _this.max = value.max
              return _this.max
            },
            min: 0
          },
          {
            type: 'value',
            name: '危化品种类数',
            max: function (value) {
              return _this.max
            },
            min: 0,
            axisLine: {
              // 这是y轴文字颜色
              lineStyle: {
                color: '#BFF7FF'
              }
            },
            axisLabel: {
              formatter: '{value}'
            }
          }
        ],

        series: [
          {
            name: '危化品企业数',
            type: 'bar',
            data: [],
            yAxisIndex: 0,
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      // 0% 处的颜色
                      offset: 0,
                      color: '#02C6FF'
                    },
                    {
                      // 100% 处的颜色
                      offset: 1,
                      color: 'rgba(2, 198, 255, 0) '
                    }
                  ],
                  false
                )
              }
            }
          },
          {
            name: '危化品种类',
            type: 'bar',
            yAxisIndex: 0,
            data: [],
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      // 0% 处的颜色
                      offset: 0,
                      color: '#32D5A5'
                    },
                    {
                      // 100% 处的颜色
                      offset: 1,
                      color: 'rgba(2, 198, 255, 0)'
                    }
                  ],
                  false
                )
              }
            }

          }
        ]
      }
      this.myChart4.setOption(this.option4)
      this.autoPlay(_this.myChart4, _this.option4, 'startCharts4')
    },
    getLoading () {
      // let _this = this
      this.myChart5 = echarts.init(document.getElementById('loading'))
      this.option5 = {
        animationDuration: 5000,
        tooltip: {
          trigger: 'axis'
        },
        // color: ['#13B9FB', '#00F1E9'],
        dataZoom: [
          {
            type: 'inside',
            startValue: 0,
            endValue: 15,
            yAxisIndex: [0],
            zoomLock: true
          }
        ],
        legend: {
          top: 0,
          right: 0,
          // 这是legend轴文字颜色
          textStyle: {
            color: '#BFF7FF'
          }
        },
        grid: {
          top: '10%',
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'value',
            axisLabel: {
              show: true,
              textStyle: {
                color: '#BFF7FF'
              }
            }
          }
        ],
        yAxis: [
          {
            type: 'category',
            axisTick: {
              show: false
            },
            data: [],
            axisLine: {
              // 这是y轴文字颜色
              lineStyle: {
                color: '#BFF7FF'
              }
            }
          }
        ],
        series: [
          {
            name: '卸货',
            type: 'bar',
            stack: 'Total',
            label: {
              show: true,
              position: 'inside'
            },
            emphasis: {
              focus: 'series'
            },
            data: [],
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      // 0% 处的颜色
                      offset: 0,
                      color: '#02C6FF'
                    },
                    {
                      // 100% 处的颜色
                      offset: 1,
                      color: 'rgba(2, 198, 255, 0) '
                    }
                  ],
                  false
                )
              }
            }
          },
          {
            name: '装货',
            type: 'bar',
            stack: 'Total',
            label: {
              show: true
            },
            emphasis: {
              focus: 'series'
            },
            data: [],
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      // 0% 处的颜色
                      offset: 0,
                      color: '#32D5A5'
                    },
                    {
                      // 100% 处的颜色
                      offset: 1,
                      color: 'rgba(2, 198, 255, 0)'
                    }
                  ],
                  false
                )
              }
            }
          }
        ]
      }
      this.myChart5.setOption(this.option5)
      // this.autoPlay(_this.myChart5, _this.option5, "startCharts5");
    },
    // 浙江省地图
    renderMyChart () {
      let _this = this
      this.myChart2 = echarts.init(document.getElementById('map'))
      let uploadedDataURL = require('../zhejiang.json')
      // this.center = {
      //   点1: [119.228955, 29.188679],
      //   点2: [119.87286, 29.804324],
      //   点3: [120.516766, 28.496163],
      //   点4: [121.767782, 29.74012],
      //   点5: [120.295998, 30.813982],
      // };
      let scatterData1 = []
      for (let item in this.center) {
        scatterData1.push(this.center[item].concat(item))
      }
      echarts.registerMap('js', uploadedDataURL)
      this.option2 = {
        title: {
          text: '浙江省化工产业分布',
          top: '10px',
          textStyle: {
            width: '100%',
            color: '#1c4ca1',
            'font-weight': 700
          }
        },
        tooltip: {
          trigger: 'item',
          extraCssText: 'z-index: 9999',
          // backgroundColor:'rgba(19, 130, 221,0.6)',
          backgroundColor: null,
          borderColor: '#333',
          borderWidth: 0,
          padding: 0,
          textStyle: {
            color: '#ffffff'
          },
          formatter: function (para) {
            if (para.seriesType === 'effectScatter') {
              let str = `<div style="position: relative;border:1px solid #00d3e7;background-color:rgba(10, 39, 116, .5)">
                <div style="width: 10px;height: 10px;position:absolute;border-top: 3px solid #00d3e7;border-left: 3px solid #00d3e7;left: -3px;top: -3px; "></div>
                <div style="width: 10px;height: 10px;position:absolute;border-top: 3px solid #00d3e7;border-right: 3px solid #00d3e7;right: -3px;top: -3px;"></div>
                <div style="width: 10px;height: 10px;position:absolute;border-bottom:3px solid #00d3e7;border-right: 3px solid #00d3e7;right: -3px;bottom: -3px;"></div>
                <div style="width: 10px;height: 10px;position:absolute;border-bottom:3px solid #00d3e7;border-left: 3px solid #00d3e7;left: -3px;bottom: -3px;"></div>`
              str +=
                ' <div  style="padding: 10px;"><div style="color:#EEBF43;text-align: center;font-weight: 600"; >' +
                para.data[4] +
                '</div>' +
                '<div  style=" font-size: 12px;"><span style="color:#E4E4E4;   display: inline-block; width: 120px;">&nbsp;今日危化品装货总量:</span>&nbsp;&nbsp;&nbsp;  <span  style=" padding-left: 5px;  color: #00E4FF !important;" >' +
                para.data[2] +
                '</span></div>' +
                '<div style=" font-size: 12px;"><span style="color:#E4E4E4;   font-size: 12px; display: inline-block; width: 120px;">&nbsp;重点监管危化品:</span>&nbsp;&nbsp;&nbsp;  <span  style=" padding-left: 5px;  color: #00E4FF !important;" >' +
                para.data[3] +
                ' </span></div></div></div>'
              return str
            } else {
              return ''
            }
          }
        },
        geo: [
          {
            map: 'js',
            aspectScale: 0.9,
            roam: true, // 是否允许缩放
            layoutSize: '100%',
            layoutCenter: ['50%', '55%'],
            zoom: 0.9,
            itemStyle: {
              areaColor: '#113D8D',
              borderColor: 'rgb(27, 172, 255)',
              borderWidth: 1
            },
            emphasis: {
              itemStyle: {
                areaColor: '#005ddc'
              },
              label: {
                show: true,
                color: '#ffffff'
              }
            },
            label: {
              show: true,
              color: '#ffffff'
            },
            zlevel: 3
          }
        ],
        series: [
          {
            type: 'effectScatter',
            coordinateSystem: 'geo',
            itemStyle: {
              normal: {
                color: 'rgb(0, 141, 221)'
              }
            },
            label: {
              formatter: function (para) {
                return ''
              },
              emphasis: {
                show: true
              }
            },
            emphasis: {
              label: {
                show: true
              },
              itemStyle: {
                color: 'rgb(255, 155, 55)',
                borderColor: 'rgb(255, 155, 55)',
                borderWidth: 6
              }
            },
            symbol: 'circle',
            symbolSize: 6,
            data: scatterData1,
            zlevel: 10
          }
        ]
      }
      this.myChart2.setOption(this.option2)
      this.mapAutoPlay(_this.myChart2, _this.option2, 'startCharts2')
    },
    // 自动播放
    autoPlay (myChart, option, timer) {
      var str = timer
      let flag = true
      let charPiecurrentIndex = 0
      // 鼠标移动上去的时候的高亮动画
      myChart.on('mouseover', function (param) {
        flag = false
        clearInterval(timer)
        // 取消之前高亮图形
        myChart.dispatchAction({
          type: 'downplay',
          seriesIndex: 0,
          dataIndex: charPiecurrentIndex
        })

        charPiecurrentIndex = param.dataIndex
        //* *解决文章所述问题**// //记录上一次选中值重新进入时取消高亮

        // 高亮当前图形
        myChart.dispatchAction({
          type: 'highlight',
          seriesIndex: 0,
          dataIndex: param.dataIndex
        })

        myChart.dispatchAction({
          type: 'showTip',
          seriesIndex: 0,
          dataIndex: param.dataIndex
        })
      })

      // 图标随窗口大小缩放
      window.addEventListener('resize', function () {
        myChart.resize()
      })

      // 自动高亮显示
      var chartHover = function () {
        var dataLen = option.series[0].data.length

        // 取消之前高亮的图形
        myChart.dispatchAction({
          type: 'downplay',
          seriesIndex: 0,
          dataIndex: charPiecurrentIndex
        })
        charPiecurrentIndex = (charPiecurrentIndex + 1) % dataLen

        // 高亮当前图形
        myChart.dispatchAction({
          type: 'highlight',
          seriesIndex: 0,
          dataIndex: charPiecurrentIndex
        })
        // 显示 tooltip
        myChart.dispatchAction({
          type: 'showTip',
          seriesIndex: 0,
          dataIndex: charPiecurrentIndex
        })
      }

      timer = setInterval(chartHover, 2000)
      // 4、鼠标移出之后，恢复自动高亮
      myChart.on('mouseout', function (param) {
        if (!flag) {
          timer = setInterval(chartHover, 2000)
          flag = true
        }
      })
      this.$once('hook:beforeDestroy', () => {
        clearInterval(timer)
        console.log(str + '已经清楚定时器')
        timer = null
      })
    },
    mapAutoPlay (myChart, option, timer) {
      let flag = true
      let charPiecurrentIndex = 0
      // 鼠标移动上去的时候的高亮动画
      myChart.on('mouseover', function (param) {
        if (param.componentType === 'series') {
          flag = false
          clearInterval(timer)
          // 取消之前高亮图形
          myChart.dispatchAction({
            type: 'downplay',
            seriesIndex: 0,
            dataIndex: charPiecurrentIndex
          })

          charPiecurrentIndex = param.dataIndex
          //* *解决文章所述问题**// //记录上一次选中值重新进入时取消高亮

          // 高亮当前图形
          myChart.dispatchAction({
            type: 'highlight',
            seriesIndex: 0,
            dataIndex: param.dataIndex
          })

          myChart.dispatchAction({
            type: 'showTip',
            seriesIndex: 0,
            dataIndex: param.dataIndex
          })
        }
      })

      // 图标随窗口大小缩放
      window.addEventListener('resize', function () {
        myChart.resize()
      })

      // 自动高亮显示
      var chartHover = function () {
        var dataLen = option.series[0].data.length

        // 取消之前高亮的图形
        myChart.dispatchAction({
          type: 'downplay',
          seriesIndex: 0,
          dataIndex: charPiecurrentIndex
        })
        charPiecurrentIndex = (charPiecurrentIndex + 1) % dataLen

        // 高亮当前图形
        myChart.dispatchAction({
          type: 'highlight',
          seriesIndex: 0,
          dataIndex: charPiecurrentIndex
        })
        // 显示 tooltip
        myChart.dispatchAction({
          type: 'showTip',
          seriesIndex: 0,
          dataIndex: charPiecurrentIndex
        })
      }

      // 高亮当前图形
      myChart.dispatchAction({
        type: 'highlight',
        seriesIndex: 0,
        dataIndex: 0
      })

      timer = setInterval(chartHover, 5000)
      // 4、鼠标移出之后，恢复自动高亮
      myChart.on('mouseout', function (param) {
        if (!flag) {
          timer = setInterval(chartHover, 5000)
          flag = true
        }
      })
    },
    getPie3D (pieData, internalDiameterRatio, title, alpha, distance) {
      // internalDiameterRatio:透明的空心占比
      let that = this
      let series = []
      let sumValue = 0
      let startValue = 0
      let endValue = 0
      let legendData = []
      let legendBfb = []
      let k = 1 - internalDiameterRatio
      pieData.sort((a, b) => {
        return b.value - a.value
      })
      // 为每一个饼图数据，生成一个 series-surface 配置
      for (let i = 0; i < pieData.length; i++) {
        sumValue += pieData[i].value
        let seriesItem = {
          name:
            typeof pieData[i].name === 'undefined'
              ? `series${i}`
              : pieData[i].name,
          type: 'surface',
          parametric: true,
          wireframe: {
            show: false
          },
          pieData: pieData[i],
          pieStatus: {
            selected: false,
            hovered: false,
            k: k
          },
          center: ['10%', '50%']
        }

        if (typeof pieData[i].itemStyle !== 'undefined') {
          let itemStyle = {}
          // eslint-disable-next-line no-unused-expressions
          typeof pieData[i].itemStyle.color !== 'undefined'
            ? (itemStyle.color = pieData[i].itemStyle.color)
            : null
          // eslint-disable-next-line no-unused-expressions
          typeof pieData[i].itemStyle.opacity !== 'undefined'
            ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
            : null
          seriesItem.itemStyle = itemStyle
        }
        series.push(seriesItem)
      }

      // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
      // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
      legendData = []
      legendBfb = []
      for (let i = 0; i < series.length; i++) {
        endValue = startValue + series[i].pieData.value
        series[i].pieData.startRatio = startValue / sumValue
        series[i].pieData.endRatio = endValue / sumValue
        series[i].parametricEquation = this.getParametricEquation(
          series[i].pieData.startRatio,
          series[i].pieData.endRatio,
          false,
          false,
          k,
          series[i].pieData.value
        )
        startValue = endValue
        let bfb = that.fomatFloat(series[i].pieData.value / sumValue, 4)
        legendData.push({
          name: series[i].name,
          value: bfb
        })
        legendBfb.push({
          name: series[i].name,
          value: bfb
        })
      }
      let boxHeight = this.getHeight3D(series, 40) // 通过传参设定3d饼/环的高度，26代表26px
      // 准备待返回的配置项，把准备好的 legendData、series 传入。
      let option = {
        animationDuration: 5000,
        // legend: {
        //   data: legendData,
        //   orient: 'horizontal',
        //   type:'scroll',
        //   pageTextStyle: {
        //     color: "#A1E2FF"
        //   },
        //   pageIconColor: "#29bca8", // 可以点击的翻页按钮颜色
        //   pageIconInactiveColor: "#7f7f7f", // 禁用的按钮颜色
        //   left: 10,
        //   bottom: 10,
        //   itemGap: 10,
        //   textStyle: {
        //       color: '#A1E2FF',
        //   },
        //   show: true,
        //   itemHeight: 14,
        //   itemWidth: 14,
        // formatter: function(param) {
        //     let item = legendBfb.filter(item => item.name == param)[0];
        //     let bfs = that.fomatFloat(item.value * 100, 2) + "%";
        //     return `${item.name}  ${bfs}`;
        // }
        // },
        title: {
          text: title,
          top: 0,
          left: '10px',
          textStyle: {
            width: '100%',
            color: '#52CCFF',
            fontSize: 14,
            fontWeight: 600
          }
        },
        tooltip: {
          confine: true,
          padding: [0, 5],
          formatter: (params) => {
            if (
              params.seriesName !== 'mouseoutSeries' &&
              params.seriesName !== 'pie2d'
            ) {
              // let bfb = ((option.series[params.seriesIndex].pieData.endRatio - option.series[params.seriesIndex].pieData.startRatio) *
              //   100).toFixed(2);
              return (
                `${params.seriesName}<br/>` +
                `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color};"></span>` +
                `${option.series[params.seriesIndex].pieData.value}个`
              )
            }
          }
        },
        xAxis3D: {
          min: -1,
          max: 1
        },
        yAxis3D: {
          min: -1,
          max: 1
        },
        zAxis3D: {
          min: -1,
          max: 2
        },
        grid3D: {
          show: false,
          boxHeight: boxHeight, // 圆环的高度
          viewControl: {
            // 3d效果可以放大、旋转等，请自己去查看官方配置
            alpha: alpha, // 角度
            distance: distance, // 调整视角到主体的距离，类似调整zoom
            rotateSensitivity: 0, // 设置为0无法旋转
            zoomSensitivity: 0, // 设置为0无法缩放
            panSensitivity: 0, // 设置为0无法平移
            autoRotate: false // 自动旋转
          }
        },
        series: series
      }
      return option
    },
    // 获取3d丙图的最高扇区的高度
    getHeight3D (series, height) {
      series.sort((a, b) => {
        return b.pieData.value - a.pieData.value
      })
      return (height * 25) / series[0].pieData.value
    },
    // 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
    getParametricEquation (startRatio, endRatio, isSelected, isHovered, k, h) {
      // 计算
      let midRatio = (startRatio + endRatio) / 2
      let startRadian = startRatio * Math.PI * 2
      let endRadian = endRatio * Math.PI * 2
      let midRadian = midRatio * Math.PI * 2
      // 如果只有一个扇形，则不实现选中效果。
      if (startRatio === 0 && endRatio === 1) {
        isSelected = false
      }
      // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
      k = typeof k !== 'undefined' ? k : 1 / 3
      // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
      let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0
      let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0
      // 计算高亮效果的放大比例（未高亮，则比例为 1）
      let hoverRate = isHovered ? 1.2 : 1
      // 返回曲面参数方程
      return {
        u: {
          min: -Math.PI,
          max: Math.PI * 3,
          step: Math.PI / 32
        },
        v: {
          min: 0,
          max: Math.PI * 2,
          step: Math.PI / 20
        },
        x: function (u, v) {
          if (u < startRadian) {
            return (
              offsetX +
              Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
            )
          }
          if (u > endRadian) {
            return (
              offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
            )
          }
          return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate
        },
        y: function (u, v) {
          if (u < startRadian) {
            return (
              offsetY +
              Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
            )
          }
          if (u > endRadian) {
            return (
              offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
            )
          }
          return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate
        },
        z: function (u, v) {
          if (u < -Math.PI * 0.5) {
            return Math.sin(u)
          }
          if (u > Math.PI * 2.5) {
            return Math.sin(u) * h * 0.1
          }
          return Math.sin(v) > 0 ? 1 * h * 0.1 : -1
        }
      }
    },
    fomatFloat (num, n) {
      var f = parseFloat(num)
      if (isNaN(f)) {
        return false
      }
      f = Math.round(num * Math.pow(10, n)) / Math.pow(10, n) // n 幂
      var s = f.toString()
      var rs = s.indexOf('.')
      // 判定如果是整数，增加小数点再补0
      if (rs < 0) {
        rs = s.length
        s += '.'
      }
      while (s.length <= rs + n) {
        s += '0'
      }
      return s
    },
    bindListen (myChart, option, num, timer) {
      // 监听鼠标事件，实现饼图选中效果（单选），近似实现高亮（放大）效果。
      let that = this
      let flag = true
      // let selectedIndex = '';
      let hoveredIndex = ''
      let seriesIndex = 0
      // eslint-disable-next-line no-unused-vars
      let seriesName = ''
      // eslint-disable-next-line no-unused-vars
      let dataIndex = 0
      // 监听 mouseover，近似实现高亮（放大）效果
      myChart.on('mouseover', function (params) {
        clearInterval(that[timer])
        flag = false
        seriesIndex = params.seriesIndex
        seriesName = params.seriesName
        let isSelected
        let isHovered
        let startRatio
        let endRatio
        let k
        // 如果触发 mouseover 的扇形当前已高亮，则不做操作
        if (hoveredIndex === params.seriesIndex) {

          // 否则进行高亮及必要的取消高亮操作
        } else {
          if (hoveredIndex !== '') {
            // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 false。
            isSelected = option.series[hoveredIndex].pieStatus.selected
            isHovered = false
            startRatio = option.series[hoveredIndex].pieData.startRatio
            endRatio = option.series[hoveredIndex].pieData.endRatio
            k = option.series[hoveredIndex].pieStatus.k
            // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
            option.series[hoveredIndex].parametricEquation =
              that.getParametricEquation(
                startRatio,
                endRatio,
                isSelected,
                isHovered,
                k,
                option.series[hoveredIndex].pieData.value
              )
            option.series[hoveredIndex].pieStatus.hovered = isHovered
            // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
            hoveredIndex = ''
          }
          isSelected = option.series[seriesIndex].pieStatus.selected
          isHovered = true
          startRatio = option.series[seriesIndex].pieData.startRatio
          endRatio = option.series[seriesIndex].pieData.endRatio
          k = option.series[seriesIndex].pieStatus.k
          // 对当前点击的扇形，执行高亮操作（对 option 更新）
          option.series[seriesIndex].parametricEquation =
            that.getParametricEquation(
              startRatio,
              endRatio,
              isSelected,
              isHovered,
              k,
              option.series[seriesIndex].pieData.value + 5
            )
          option.series[seriesIndex].pieStatus.hovered = isHovered
          that['legendColor' + num] = option.series[seriesIndex].itemStyle.color
          that['legendValue' + num] =
            option.series[seriesIndex].name +
            ' : ' +
            (
              (option.series[seriesIndex].pieData.endRatio -
                option.series[seriesIndex].pieData.startRatio) *
              100
            ).toFixed(2) +
            '%'
          // 记录上次高亮的扇形对应的系列号 seriesIndex
          hoveredIndex = seriesIndex
          myChart.setOption(option)
        }
      })
      var chartHover = function () {
        // 准备重新渲染扇形所需的参数
        let isSelected
        let isHovered
        let startRatio
        let endRatio
        let k
        // 如果当前有高亮的扇形，取消其高亮状态（对 option 更新）
        if (seriesIndex === option.series.length) {
          seriesIndex = 0
        }
        if (hoveredIndex !== '') {
          // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 false。
          isSelected = option.series[hoveredIndex].pieStatus.selected
          isHovered = false
          startRatio = option.series[hoveredIndex].pieData.startRatio
          endRatio = option.series[hoveredIndex].pieData.endRatio
          k = option.series[hoveredIndex].pieStatus.k
          // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
          option.series[hoveredIndex].parametricEquation =
            that.getParametricEquation(
              startRatio,
              endRatio,
              isSelected,
              isHovered,
              k,
              option.series[hoveredIndex].pieData.value
            )
          option.series[hoveredIndex].pieStatus.hovered = isHovered
          // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
          hoveredIndex = ''
        }
        // 如果触发 mouseover 的扇形不是透明圆环，将其高亮（对 option 更新）
        isSelected = option.series[seriesIndex].pieStatus.selected
        isHovered = true
        startRatio = option.series[seriesIndex].pieData.startRatio
        endRatio = option.series[seriesIndex].pieData.endRatio
        k = option.series[seriesIndex].pieStatus.k
        // 对当前点击的扇形，执行高亮操作（对 option 更新）
        option.series[seriesIndex].parametricEquation =
          that.getParametricEquation(
            startRatio,
            endRatio,
            isSelected,
            isHovered,
            k,
            option.series[seriesIndex].pieData.value + 5
          )
        option.series[seriesIndex].pieStatus.hovered = isHovered
        that['legendColor' + num] = option.series[seriesIndex].itemStyle.color
        that['legendValue' + num] =
          option.series[seriesIndex].name +
          ' : ' +
          (
            (option.series[seriesIndex].pieData.endRatio -
              option.series[seriesIndex].pieData.startRatio) *
            100
          ).toFixed(2) +
          '%'
        // 记录上次高亮的扇形对应的系列号 seriesIndex
        hoveredIndex = seriesIndex
        // 使用更新后的 option，渲染图表
        myChart.setOption(option)
        seriesIndex++
      }
      // 修正取消高亮失败的 bug
      myChart.on('globalout', function () {
        if (!flag) {
          that[timer] = setInterval(chartHover, 5000)
          flag = true
        }
      })
      that[timer] = setInterval(chartHover, 5000)
    },
    countPercentage (countArray) {
      var j = eval(countArray.join('+'))
      var resultArray = []
      for (var i = 0; i < countArray.length; i++) {
        var k = ((countArray[i] / j) * 100).toFixed(2) + '%'
        resultArray.push(k)
      }
      return resultArray
    }

  },
  beforeDestroy () {
    clearInterval(this.intervalId)
    clearInterval(this.startCharts3)
    clearInterval(this.startCharts4)
    clearInterval(this.timer1)
  }
}
</script>
<style lang="scss" scoped>
.main {
  background-size: 100% 100%;
  background: #041565;
}
.top {
  height: 80px;
  line-height: 60px;
  box-sizing: border-box;
}
.box {
  padding: 10px;
  margin-bottom: 10px;
  background-image: url('../../../../assets/img/industry/Risk/Risk.png');
  background-size: 100% 100%;
}

.title {
  width: 270px;
  margin-left: 10px;
  font-weight: 700;
  font-size: 14px;
  background-image: url('../../../../assets/img/industry/小标题背景1.png');
  background-size: 100% 100%;
  color: #ffffff;
  p {
    padding-left: 26px;
    font-size: 12px;
  }
}
.content {
  padding: 10px;
}
.content-body {
  padding: 5px;
  margin-top: 5px;
}
.rightTop {
  width: 100%;
  .rightTopBox {
    padding: 5px;
    border-radius: 5px;
    text-align: center;
    background-image: url('../../../../assets/img/industry/Risk/number.png');
    background-size: 100% 100%;
    > div:first-child {
      color: #1c4ca1;
      font-size: 12px;
      color: rgba(255, 255, 255, 1);
    }
    > div:last-child {
      height: 22.4px;
      color: #00a3ff;
      font-size: 20px;
    }
  }
}
.rightTopBottom {
  width: 100%;
}
.tabs {
  overflow: hidden;

  > div {
    float: left;
    color: #7db2d0;
    padding: 5px 7px;
    cursor: pointer;
    margin-bottom: 10px;
  }
}
.selectActive {
  // color: #00a3ff !important;
  font-weight: 600;
  color: #52ccff !important;
  text-align: center;

  background: linear-gradient(
    0deg,
    rgba(0, 180, 255, 0.4),
    rgba(0, 180, 255, 0.05)
  );
  border: 1px solid #000000;
  border-radius: 3px;
}
.content-body /deep/ .el-table th {
  background-color: transparent;
  color: #4a6899;
}
.content-body /deep/ .el-table,
.el-table__expanded-cell {
  background-color: transparent;
}

.content-body /deep/ .el-table tr {
  background-color: transparent;
}
.content-body /deep/ .el-table--enable-row-transition .el-table__body td,
.el-table .cell {
  background-color: transparent;
}
#tableColor,
#tableColor1,
#tableColor2,
#tableColor3,
#tableColor4 {
  width: 100%;
}
.content-body #tableColor /deep/ .statistics-warning-row,
.content-body #tableColor1 /deep/ .statistics-warning-row,
.content-body #tableColor2 /deep/ .statistics-warning-row,
.content-body #tableColor3 /deep/ .statistics-warning-row,
.content-body #tableColor4 /deep/ .statistics-warning-row {
  background-color: #d6e6ff !important;
}
//滚动条的宽度
.main ::-webkit-scrollbar {
  width: 12px;
  height: 10px;
}

//滚动条的滑块
.main ::-webkit-scrollbar-thumb {
  background-color: rgba(0, 90, 255, 0.1);
  border-radius: 5px;
}
/deep/ .BMap_cpyCtrl {
  display: none;
}
/deep/ .anchorBL {
  display: none;
}
.intrdouce {
  width: 144px;
  left: 20px;
  bottom: 20px;
  position: absolute;
  z-index: 10;
  background-color: rgba(255, 255, 255, 0.8);
  font-size: 16px;
  color: #ffffff;
  overflow: hidden;
  .legend-body {
    text-align: center;
    margin: 6px;
    height: 40px;
    padding: 10px 0px 10px 15px;
  }
  .legend-title {
    font-size: 15px;
    font-weight: bold;
    float: left;
    line-height: 20px;
  }
  .legend-icon {
    float: left;
    margin-right: 10px;
  }
}
.goback {
  position: absolute;
  z-index: 10;
  top: 10px;
  right: 10px;
  padding: 5px 10px;
  color: #1c4ca1;
  cursor: pointer;
  border-radius: 20px;
  background-color: rgba(255, 255, 255, 0.5);
  > span {
    display: inline-block;
    width: 17px;
    height: 17px;
    border-radius: 50%;
    background-color: #1c4ca1;
    color: #ffffff;
    text-align: center;
    margin-right: 5px;
  }
}
.content-center {
  .left_baidu {
    position: relative;
    background: #ffffff;
    border: 1px solid #f0f0f0;
    box-shadow: 0px 5px 20px 0px rgba(0, 0, 0, 0.1);
    height: 770px;
    margin: 0px auto;
  }
}
.ulList {
  margin-top: 20px;
  li {
    list-style: none;
    overflow: hidden;
    padding: 10px 0;
    border-bottom: 1px dashed #aecaf2;
    > div:first-child {
      float: left;
    }
    > div:last-child {
      float: right;
      color: #00a3ff;
    }
  }
}
.securityBottom {
  width: 100%;
  background-color: #e0ebfe;
  border-radius: 5px;
  > div {
    margin: 5px auto;

    > div {
      text-align: center;
      height: 30px;
      line-height: 30px;
    }
    > div:last-child {
      color: #4972ff;
      font-size: 20px;
    }
  }
  .securityBottomCenter {
    border-left: 1px solid #aecaf2;
    border-right: 1px solid #aecaf2;
  }
}
.overview {
  height: 47.5px;
  line-height: 47.5px;
}
.source > div {
  background-image: url('../../../../assets/img/industry/Risk/number.png');
  background-size: 100% 100%;
  margin: 0 auto 10px;
  border-radius: 5px;
  padding: 10px 16px;
  margin: 0 16px;
  float: left;
  font-size: 12px;

  color: #ffffff;
  > div:first-child {
    float: left;
  }
  > div:nth-child(2) {
    float: left;
    color: transparent;
    background-image: -webkit-linear-gradient(#fff, #f0c41b, #fff, #f0c41b);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-left: 5px;
  }
}
.active {
  color: transparent;
  background-image: -webkit-linear-gradient(#fff, #f0c41b, #fff, #f0c41b);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/deep/ .gutter {
  background: transparent;
}
/deep/ .el-table__body-wrapper {
  background: transparent;
}
.select-body /deep/ .el-input__inner {
  background: #1f4987;
  border: 1px solid #3573fc;
}

/deep/ .el-select .el-input .el-select__caret {
  color: #3573fc;
}
.content-body /deep/.has-gutter {
  background: #022b7e !important;
  tr {
    background: #022b7e !important;
    border: none;
    th {
      background: #022b7e !important;
      color: #00e4ff;
      border: none;
    }
  }
}

.content-body /deep/ .el-table tr {
  background-color: transparent;
  color: #bbdaff;
}
/deep/ .el-table__empty-block {
  background: transparent;
}
.content-body /deep/ .el-table th {
  background-color: #cadfff !important;
  color: #4a6899;
  font-size: 12px;
  padding: 6px 0;
}
/deep/ .el-table__body-wrapper {
  background: transparent;
}
.content-body /deep/ .el-table,
.el-table__expanded-cell {
  background-color: transparent; //没有数据也变颜色
}
.content-body /deep/ .el-table--enable-row-transition .el-table__body td,
.el-table .cell {
  background-color: transparent;
}
.table1 {
  width: 100%;
}
.content-body.statistics-warning-row {
  background-color: #d6e6ff !important;
}
/deep/ .el-table tbody tr:hover > td {
  background-color: #5f83ff !important;
}

/deep/.el-table td {
  border: none;
}
/deep/ .table-row1 {
  background-color: #082560 !important;
  border: none;
}

/deep/ .table-row2 {
  background-color: #051e79 !important;
  border: none;
}
/deep/ .el-table--striped .el-table__body tr.el-table__row--striped td {
  background: transparent;
}
/deep/.el-table__body-wrapper::-webkit-scrollbar {
  width: 0;
}
/deep/ .el-table__body {
  width: 100% !important;
}

.legend {
  position: absolute;
  bottom: 10px;
  left: 5%;
  color: #a1e2ff;
  text-align: center;
  overflow: hidden;
  > div {
    float: left;
  }
}
.legendColor {
  width: 20px;
  height: 12px;
  line-height: 14px;
  border-radius: 3px;
  vertical-align: bottom;
}
.legend div:nth-child(2) {
  width: 170px;
  font-size: 12px;
  margin-left: 5px;
  text-align: left;
}
.aperture {
  position: absolute;
  top: 41%;
  left: 50%;
  margin-left: -34%;
  width: 68%;
  height: 82px;
  background-image: url('../../../../assets/img/industry/aperture.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.enterprise-body {
  float: left;
  width: 80%;
  height: 185px;
  padding: 25px 5px;
  color: #ffffff;
  margin-left: 10px;
}
.enterprise-content {
  width: 100%;
  height: 30px;
  // border-bottom: 1px solid #B2D4F0;
  // border-style: dashed;
  padding: 0px 5px;
}
.enterprise-color {
  width: 10px;
  height: 10px;
  margin-top: 10px;
  float: left;
}
.enterprise-type {
  font-size: 13px;
  // color: #ffffff;
  line-height: 30px;
  float: left;
  margin-left: 12px;
  font-size: 12px;
}
.enterprise-count {
  font-size: 14px;
  line-height: 30px;
  float: right;
  font-size: 12px;
}
.enterprise-content1 {
  width: 100%;
  height: 40px;
  // border-bottom: 1px solid #B2D4F0;
  // border-style: dashed;
  padding: 0px 5px;
}
.enterprise-color1 {
  width: 10px;
  height: 10px;

  float: left;
  margin-top: 5px;
}

.enterprise-type1 {
  font-size: 13px;

  float: left;
  margin-left: 12px;
  font-size: 12px;
}
.enterprise-type2 {
  font-size: 13px;
  float: left;
  margin-left: 22px;
  font-size: 12px;
  font-weight: 400;
  color: #00e4ff;
  font-weight: 400;
}
.enterprise-count1 {
  font-size: 14px;

  float: right;
  font-size: 12px;
  color: rgba(229, 251, 255, 1);
}
.enterprise-count2 {
  font-size: 13px;
  float: right;
  font-size: 12px;
  font-weight: 400;
  color: #00e4ff;
  font-size: 12px;
  font-weight: 400;
}

</style>
